<template>
  <div>
    <transition name="fade">
      <!-- 个人用户信息 -->
      <div class="page-user" ref="userModelRef" v-if="userModelShow">
        <div class="page-header">
          <div class="page-title">
            {{ appState.userInfo.Name }}
          </div>
          <div class="page-phone">
            <sex-icon :sex="appState.userInfo.Sex"></sex-icon>
            {{ appState.userInfo.Phone || "-" }}
          </div>
        </div>
        <div class="page-footer">
          
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, nextTick } from "vue";

export default defineComponent({
  name: "AppAvatar",
})
</script>

<script lang="ts" setup>
import { appAction, appState } from "@/store/app";
import { request } from "@/utils/axios";
import { ElMessage, ElMessageBox } from "element-plus";
import { onClickOutside } from '@vueuse/core';
import SexIcon from "@/components/SexIcon";

let emit = defineEmits<{
  /**
   * 弹框是否在展示中 (关闭动画展示后才完全关闭)
   */
  (e: "modelChange", value: boolean): void
}>()

/**
 * 头像背景图片
 */
let avatar = ref(require("@/assets/app/tx.svg"));

/**
 * 弹框
 */
let userModelRef = ref();

/**
 * 弹框展示
 */
let userModelShow = ref(false);

/**
 * 弹框关闭钩子
 */
let stopHandle: any;

/**
 * 打开弹框
 */
function show() {
  userModelShow.value = true;
  nextTick(() => {
    stopHandle = onClickOutside(userModelRef, (event) => {
      closeUserModel();
    });
    emit("modelChange", true);
  })
}

/**
 * 关闭弹框
 */
function closeUserModel() {
  userModelShow.value = false;
  stopHandle && stopHandle();
  setTimeout(() => {
    stopHandle = null;
    emit("modelChange", false);
  }, 250)
}

defineExpose({
  show,
})

/**
 * =============================
 * 初始化
 * =============================
 */

</script>

<style lang="less" scoped>
@import url("../../config.less");

.fade-enter-active,
.fade-leave-active {
  transition: 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

// 用户弹框
.page-user {
  position: fixed;
  right: 10px;
  width: 280px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: white;
  z-index: 2;
  border-radius: 3px;
  box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.05);
}

.page-header{
  padding: 15px;
}

.page-title {
  font-size: 17px;
  font-weight: bold;
}

.page-phone {
  padding-top: 10px;
}

.page-footer{
  padding:15px 10px 10px 15px;
  border-top:1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  flex-wrap: wrap;
  max-height: 200px;
  overflow: auto;
}

.page-org-item{
  background-color:var(--primaryColor10);
  border-radius: 3px;
  padding:3px 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>
